<template>
  <div app-container>
    <el-collapse v-for="(one, index) in allData" v-model="activeNames" @change="handleChange">
      <el-collapse-item :title="one.title" name="1">
        <template slot="title">
          <p class="title">{{ one.title }}</p>
        </template>
        <div v-for="oneone in one.viewDetails" id="context">
          <el-form :ref="oneone" :model="oneone" label-width="auto" label-position="left" :inline="true">
            <el-form-item v-if="oneone.fieldType != 'select'" :label="oneone.fieldName" :prop="oneone.field">
              <el-input v-model="oneone.value" :type="oneone.fieldType" :value="oneone.value"
                :class="oneone.fieldClass" />
            </el-form-item>

            <el-form-item v-else-if="oneone.fieldType == 'select'" :label="oneone.fieldName" :prop="oneone.field">
              <el-select v-model="oneone.value" placeholder="">
                <el-option v-for="opt in oneone.fieldOption.split('，')" :label="opt.name" :value="opt" />
                <!-- <el-option
                  v-for="dict in dict.type.user_personal_national"
                  v-if="oneone.dictType == 'dict.type.user_personal_national'"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />               -->
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-button @click="saveUerInfo">提交</el-button>
  </div>

</template>

<script>

// import {findUser} from '@/api/client'
import { dataRenering, newViewDetails, saveInfoToClientTable } from '@/api/viewDetails'

export default {
  dicts: ['user_personal_national', 'user_personal_marital_status'],
  data() {
    return {
      allData: [
        {
          title: '个人信息',
          data: []
        }
      ],

      saveData: {
        clientId: undefined,
        allData: []
      },
      newData: [],
      pageInfo: [
        {
          name: undefined
        }
      ],
      userInfo: [],
      activeNames: ['1']
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      dataRenering().then(res => {
        console.log(res)
        this.allData = res.data
      }).catch()
      // findUser().then(user =>{
      //       console.log(user)
      //       this.userInfo = user.rows
      //       console.log(this.userInfo)
      //       viewDetails().then(res => {
      //       console.log(res)

      //     }).catch();
      // }).catch();
      // newViewDetails().then(res=>{
      //     console.log(res);
      //     this.allData = res.data
    },
    saveUerInfo() {
      console.log(this.allData)
      const clientId = 3
      // 保存信息
      saveInfoToClientTable(this.allData)
    },
    saveUerInfo() {
      // 保存信息
      saveInfoToClientTable(this.allData)
    },

    handleChange(val) {
      console.log(val)
      console.log(this.allData)
    }
  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  float: left;
  /* width: 20%;  */
  margin-left: 50px;
}

.long {
  width: 1050px;
  /* margin-left: 50px; */
}

.short {
  /* float: left; */
  width: 450px;
  /* margin-left: 50px; */
}

.title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
